import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { Tree, Input, Button, Rate } from 'antd';
import { FormOutlined, PlusOutlined, MinusOutlined,SearchOutlined} from '@ant-design/icons';
import Editor from 'for-editor';
import style from "./skillDescriptionV2.less";
import "./skillDescriptionV2.less"

const { Search } = Input;
interface IProps {
    stationVersionId: string
}
const rates = ['', '了解', '熟悉', '掌握'];
const SKillDescriptionV2: React.FC<IProps> = props => {
    const { station } = useStore();
    const [currentSkillId, setCurrentSkillId] = useState('');
    const [isEdit, setIsEdit] = useState(false);


    useEffect(() => {
        station.selectSkillList(props.stationVersionId);
    }, [])

    useEffect(() => {
        if (currentSkillId) {
            station.getStationSkillDetail(currentSkillId);
        }
    }, [currentSkillId]);

    // 在树的尾部追加一项
    function addDescription() {
        station.inintSkill(props.stationVersionId);
    }

    // 在当前树增加一个子树
    function addChildDescription(parentId: string) {
        station.inintSkill(props.stationVersionId, parentId);
    }

    // 从父树中删掉当前树
    function removeChildDescription(skillId: string) {
        station.deleteSkill(skillId);
    }

    return <div className={style.cont}>
        <div className={style.cont1}>
            <div className={style.left}>
                {/* 成功之后给个提示 */}
                <Button type="primary" style={{width:"100%",marginTop:"0px"}} onClick={() => station.putSkill()}>保存</Button>
                {/* 左边树形结构 */}
                <section>
                    <section className={style.left_1}>
                        <Input style={{width:"200px",height:"30px"}} prefix={<SearchOutlined />} placeholder="清输入内容"/>
                        {/* <Search   /> */}
                        <Button style={{flex:1, width:"40px",height:'96%',marginTop:"0px",padding:"2px 5px", textAlign:"center",fontSize:"15px"}} onClick={() => addDescription()}>+</Button>
                    </section>
                    <Tree
                        autoExpandParent={true}
                        treeData={station.skillList}
                        titleRender={(nodeData: any) => {
                            return <p onClick={() => setCurrentSkillId(nodeData.id)}>
                                {isEdit && currentSkillId === nodeData.id ? <input type="text" value={station.skillDetail.skillName} onKeyDown={e => {
                                    // 弹个框
                                    if (e.keyCode === 13) {
                                        station.putSkill();
                                        setIsEdit(false);
                                    }
                                }} onChange={e => station.modifySKillDetail({ skillName: e.target.value })} />
                                    : <span>{currentSkillId === nodeData.id ? station.skillDetail.skillName : nodeData.label}</span>}
                                {currentSkillId === nodeData.id ? <span>
                                    <FormOutlined onClick={() => setIsEdit(true)} />
                                    <PlusOutlined onClick={() => addChildDescription(nodeData.id)} />
                                    <MinusOutlined onClick={() => removeChildDescription(nodeData.id)} />
                                </span> : null}
                            </p>
                        }}
                    />
                </section>
            </div>

            {/* 右边平分项和md编辑器 */}
            <section className={style.right}>
                <Rate count={3} value={station.skillDetail.masterRequired} defaultValue={1} onChange={value => station.modifySKillDetail({ masterRequired: value })} />
                <span className="ant-rate-text">{rates[station.skillDetail.masterRequired]}</span>
                <span>一星到三星分别代表了解、掌握、精通3个级别</span>
                <Editor value={station.skillDetail.abilityStandard || ''} onChange={value => station.modifySKillDetail({ abilityStandard: value })} />
            </section>
            {/* skillDescriptionV2 */}

        </div>

    </div>
}

export default observer(SKillDescriptionV2);